<template>
  <div class="risk">
    <van-search
      class="info_search"
      v-model="value"
      @search="onSearch"
      @clear="clearSearch"
      placeholder="搜索"
    />
    <van-tabs v-model="active">
      <van-tab title="部门">
        <van-list
          style="margin-top: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
        >
          <van-cell v-for="(item, index) in list" :key="index">
            <div class="risk_item_radio" @click="submit(item)">
              <div>
                <div class="mb-10">{{ item.OrgName }}</div>
                <div>{{ item.OrgFullName }}</div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="员工">
        <van-list
          style="margin-top: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
        >
          <van-cell v-for="(item, index) in userList" :key="index">
            <div class="risk_item_radio" @click="submit(item)">
              <div>
                <div class="mb-10">{{ item.ChnName }}</div>
                <div>{{ item.OrgFullName }}</div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChooseUserList, getChooseOrgList } from "@/api/userUser";
export default {
  data() {
    return {
      backPath: this.$route.params.backpath,
      id: this.$route.params.id,
      active: 0,
      list: [],
      options: [],
      userList: [],
      userOptions: [],
      result: [],
      loading: false,
      finished: false,
      filter: {
        showMyDept: true,
        onlyMyDept: true,
        accounted: true,
      },
      activeNames: ["1"],
      border: false,
      value: "",
      radio: "",
    };
  },
  created() {
    this.getList();
    this.getUserList();
  },
  beforeRouteLeave(to, from, next) {
    to.params.id = this.$route.params.id;
    console.log(to, "to");
    next(); //继续下一步
  },
  methods: {
    handleChange(ids) {
      this.userlist = [];
      ids.map((item) => {
        this.list.map((innerItem) => {
          if (innerItem.UserName == item) {
            this.userlist.push({
              code: innerItem.UserName,
              name: innerItem.ChnName,
            });
          }
        });
      });
    },

    submit(item) {

      // this.$router.push({
      //   name: this.backPath,
      //   params: { item: item, id: this.id },
      // });
      this.$emit('DepartmentCb',item,this.active)

    },
    getList() {
      this.loading = true;
      getChooseOrgList(this.filter)
        .then((res) => {
          this.loading = false;
          this.list = res.data;
          this.options = res.data;
          this.finished = true;
        })
        .catch((err) => {
          this.finished = true;
        });
    },
    getUserList() {
      this.loading = true;
      getChooseUserList(this.filter)
        .then((res) => {
          this.loading = false;
          this.userList = res.data;
          this.userOptions = res.data;
          this.finished = true;
        })
        .catch((err) => {
          this.finished = true;
        });
    },
    // 文件页面
    goFile() {
      // this.$router.push('/CommonInfo/InfoDetail')
    },
    onSearch(keyWord) {

        if (keyWord) {
          this.list = this.fuzzyQuery(this.options, keyWord, "OrgFullName");
        }
  
        if (keyWord) {
          this.userList = this.fuzzyQuery(this.userOptions, keyWord, "ChnName");
        }
      
    },

    clearSearch() {
      this.list = this.options;
      this.userList = this.userOptions;
    },
    fuzzyQuery(list, keyWord, type) {
      var arr = [];
      list.map((item) => {
        if (item[type].indexOf(keyWord) >= 0) {
          arr.push(item);
        }
      });

      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;

  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.risk_item_radio {
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
</style>
